<template>
    <div>
        <a-row :gutter="16">
            <a-col :span="item.span" v-for="item in cardList">
                <a-card :title="item.title" :bordered="false" class="hover:shadow-lg" :key="item.title">

                    <a-row>
                        <a-col :span="24 / item.statistic.length" v-for="statistic in item.statistic"
                            :key="statistic.title">
                            <a-statistic :title="statistic.title" :value="statistic.value"
                                :precision="statistic.precision" :suffix="statistic.suffix"
                                :value-style="{ color: '#3f8600' }" style="margin-right: 50px">
                            </a-statistic>
                        </a-col>
                    </a-row>
                </a-card>
            </a-col>

        </a-row>


        <a-row :gutter="16">


            <!-- 图标 -->

            <a-col :span="12">
                <a-card title="用户统计" :bordered="false" class="hover:shadow-lg">
                    asdasd
                </a-card>
            </a-col>
        </a-row>
        {{ formState }}

        <a-button type="primary" @click="openForm">打开表单</a-button>
    </div>

</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'


const cardList = reactive([
    {
      title: '用户统计',
        span: 6,
        statistic: [
            {
                title: '今日',
                value: 1550,
                precision: 2,
                suffix: '人'
            }, {
                title: '昨日',
                value: 11.28,
                precision: 2,
                suffix: '%'
            }, {
                title: '累计',
                value: 11.28,
                precision: 2,
                suffix: '^'
            }
        ]
    }, {
        title: '标题',
        span: 3,
        statistic: [
            {
                title: '标题',
                value: 11.28,
                precision: 2,
                suffix: '%'
            }
        ]
    }
])
</script>
